<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Katniss Premium Admin Template</title>
<link rel="stylesheet" href="css/style.default.css" type="text/css" />
<link rel="stylesheet" href="prettify/prettify.css" type="text/css" />
<script type="text/javascript" src="prettify/prettify.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>

<body>

<div class="mainwrapper">
	
    <!-- START OF LEFT PANEL -->
    <div class="leftpanel">
    	
        <div class="logopanel">
        	<h1><a href="dashboard.html">Katniss <span>v1.0</span></a></h1>
        </div><!--logopanel-->
        
        <div class="datewidget">Today is Tuesday, Dec 25, 2012 5:30pm</div>
    
    	<div class="searchwidget">
        	<form action="results.html" method="post">
            	<div class="input-append">
                    <input type="text" class="span2 search-query" placeholder="Search here...">
                    <button type="submit" class="btn"><span class="icon-search"></span></button>
                </div>
            </form>
        </div><!--searchwidget-->
        
        <div class="plainwidget">
        	<small>Using 16.8 GB of your 51.7 GB </small>
        	<div class="progress progress-info">
                <div class="bar" style="width: 20%"></div>
            </div>
            <small><strong>38% full</strong></small>
        </div><!--plainwidget-->
        
        <div class="leftmenu">        
            <ul class="nav nav-tabs nav-stacked">
            	<li class="nav-header">Main Navigation</li>
                <li><a href="dashboard.html"><span class="icon-align-justify"></span> Dashboard</a></li>
                <li><a href="media.html"><span class="icon-picture"></span> Media</a></li>
                <li class="active dropdown"><a href=""><span class="icon-briefcase"></span> UI Elements &amp; Widgets</a>
                	<ul style="display: block">
                    	<li><a href="elements.html">Theme Components</a></li>
                        <li><a href="bootstrap.html">Bootstrap Components</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href=""><span class="icon-th-list"></span> Tables</a>
                	<ul>
                    	<li><a href="table-static.html">Static Table</a></li>
                        <li><a href="table-dynamic.html">Dynamic Table</a></li>
                    </ul>
                </li>
                <li><a href="typography.html"><span class="icon-font"></span> Typography</a></li>
                <li><a href="charts.html"><span class="icon-signal"></span> Graph &amp; Charts</a></li>
                <li><a href="messages.html"><span class="icon-envelope"></span> Messages</a></li>
                <li><a href="buttons.html"><span class="icon-hand-up"></span> Buttons &amp; Icons</a></li>
                <li class="dropdown"><a href=""><span class="icon-pencil"></span> Forms</a>
                	<ul>
                    	<li><a href="forms.html">Form Styles</a></li>
                        <li><a href="wizards.html">Wizard Form</a></li>
                        <li><a href="wysiwyg.html">WYSIWYG</a></li>
                    </ul>
                </li>
                <li><a href="calendar.html"><span class="icon-calendar"></span> Calendar</a></li>
                <li><a href="animations.html"><span class="icon-play"></span> Animations</a></li>
                <li class="dropdown"><a href=""><span class="icon-book"></span> Other Pages</a>
                	<ul>
                    	<li><a href="404.html">404 Error Page</a></li>
                        <li><a href="invoice.html">Invoice Page</a></li>
                        <li><a href="editprofile.html">Edit Profile</a></li>
                        <li><a href="grid.html">Grid Styles</a></li>
			<li><a href="faq.html">FAQ</a></li>
			<li><a href="stickyheader.html">Sticky Header Page</a></li>
                    </ul>
                </li>
            </ul>
        </div><!--leftmenu-->
        
    </div><!--mainleft-->
    <!-- END OF LEFT PANEL -->
    
    <!-- START OF RIGHT PANEL -->
    <div class="rightpanel">
    	<div class="headerpanel">
        	<a href="" class="showmenu"></a>
            
            <div class="headerright">
            	<div class="dropdown notification">
                    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="/page.html">
                    	<span class="iconsweets-globe iconsweets-white"></span>
                    </a>
                    <ul class="dropdown-menu">
                    	<li class="nav-header">Notifications</li>
                        <li>
                        	<a href="">
                        	<strong>3 people viewed your profile</strong><br />
                            <img src="img/thumbs/thumb1.png" alt="" />
                            <img src="img/thumbs/thumb2.png" alt="" />
                            <img src="img/thumbs/thumb3.png" alt="" />
                            </a>
                        </li>
                        <li><a href=""><span class="icon-envelope"></span> New message from <strong>Jack</strong> <small class="muted"> - 19 hours ago</small></a></li>
                        <li><a href=""><span class="icon-envelope"></span> New message from <strong>Daniel</strong> <small class="muted"> - 2 days ago</small></a></li>
                        <li><a href=""><span class="icon-user"></span> <strong>Bruce</strong> is now following you <small class="muted"> - 2 days ago</small></a></li>
                        <li class="viewmore"><a href="">View More Notifications</a></li>
                    </ul>
                </div><!--dropdown-->
                
    			<div class="dropdown userinfo">
                    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="/page.html">Hi, ThemePixels! <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="editprofile.html"><span class="icon-edit"></span> Edit Profile</a></li>
                        <li class="divider"></li>
                        <li><a href=""><span class="icon-wrench"></span> Account Settings</a></li>
                        <li><a href=""><span class="icon-eye-open"></span> Privacy Settings</a></li>
                        <li class="divider"></li>
                        <li><a href="index.html"><span class="icon-off"></span> Sign Out</a></li>
                    </ul>
                </div><!--dropdown-->
    		
            </div><!--headerright-->
            
    	</div><!--headerpanel-->
        <div class="breadcrumbwidget">
        	<ul class="skins">
                <li><a href="default" class="skin-color default"></a></li>
                <li><a href="orange" class="skin-color orange"></a></li>
                <li><a href="dark" class="skin-color dark"></a></li>
                <li>&nbsp;</li>
                <li class="fixed"><a href="" class="skin-layout fixed"></a></li>
                <li class="wide"><a href="" class="skin-layout wide"></a></li>
            </ul><!--skins-->
        	<ul class="breadcrumb">
                <li><a href="dashboard.html">Home</a> <span class="divider">/</span></li>
                <li><a href="dashboard.html">UI Elements &amp; Widgets</a> <span class="divider">/</span></li>
                <li class="active">Boostrap Components</li>
            </ul>
        </div><!--breadcrumbs-->
        <div class="pagetitle">
        	<h1>Bootstrap Components</h1> <span>This is a sample description for dashboard page...</span>
        </div><!--pagetitle-->
        
        <div class="maincontent">
        	<div class="contentinner content-bootstrap">
            	<div class="row-fluid">
                    <div class="span6">
                        <h4 class="widgettitle">Dropdown Menu <a href="widgetsource" class="showhide">View Source</a></h4>
                        <div class="widgetcontent">
                            <ul class="dropdown-menu" style="display: block; position: inherit; top: 0; left: 10px; float: none; width: 180px;">
                                <li><a tabindex="-1" href="#">Action</a></li>
                                <li><a tabindex="-1" href="#">Another action</a></li>
                                <li><a tabindex="-1" href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a tabindex="-1" href="#">Separated link</a></li>
                            </ul>
                            <div class="widgetsource">
                                <div class="divider15"></div>
                                <pre class="prettyprint linenums">&lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot; aria-labelledby=&quot;dropdownMenu&quot;&gt;
       &lt;li&gt;&lt;a tabindex=&quot;-1&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
       ...
       &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
       ...
&lt;/ul&gt;</pre>
                            </div><!--widgetsource-->
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle">Single Button Group <a href="widgetsource" class="showhide">View Source</a></h4>
                        <div class="widgetcontent">
                            <div class="btn-group">
                                <button class="btn">1</button>
                                <button class="btn">2</button>
                                <button class="btn">3</button>
                            </div>
                            
                            <div class="btn-toolbar">
                                <div class="btn-group">
                                    <button class="btn">1</button>
                                    <button class="btn">2</button>
                                    <button class="btn">3</button>
                                    <button class="btn">4</button>
                                </div>
                                <div class="btn-group">
                                    <button class="btn">5</button>
                                    <button class="btn">6</button>
                                    <button class="btn">7</button>
                                </div>
                                <div class="btn-group">
                                    <button class="btn">8</button>
                                </div>
                            </div><!--btn-toolbar-->
                            
                            <div class="btn-group btn-group-vertical">
                                <button class="btn">1</button>
                                <button class="btn">2</button>
                                <button class="btn">3</button>
                            </div>
                            
                            <div class="widgetsource">
                              <div class="divider15"></div>
                                <pre class="prettyprint linenums">&lt;div class=&quot;btn-group&quot;&gt;
       &lt;button class=&quot;btn&quot;&gt;1&lt;/button&gt;
       &lt;button class=&quot;btn&quot;&gt;2&lt;/button&gt;
       &lt;button class=&quot;btn&quot;&gt;3&lt;/button&gt;
    &lt;/div&gt;</pre>
                          <div class="divider15"></div>
                                <pre class="prettyprint linenums">&lt;div class=&quot;btn-toolbar&quot;&gt;
       &lt;div class=&quot;btn-group&quot;&gt; ... &lt;/div&gt;
       &lt;div class=&quot;btn-group&quot;&gt; ... &lt;/div&gt;
    &lt;/div&gt;</pre>
                            <div class="divider15"></div>
                            <pre class="prettyprint linenums">&lt;div class=&quot;btn-group btn-group-vertical&quot;&gt; ... &lt;/div&gt;</pre>
                            </div><!--widgetsource-->
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle">Basic Tabs <a href="widgetsource" class="showhide">View Source</a></h4>
                        <div class="widgetcontent">
                        	<ul class="nav nav-tabs">
                              <li class="active"><a href="#">Home</a></li>
                              <li><a href="#">Profile</a></li>
                              <li><a href="#">Messages</a></li>
                            </ul>
                        <div class="widgetsource">
                            	<div class="divider15"></div>
                                <pre class="prettyprint linenums">&lt;ul class=&quot;nav nav-tabs&quot;&gt;
   &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href=&quot;#&quot;&gt;...&lt;/a&gt;&lt;/li&gt;
   ...
&lt;/ul&gt;</pre>
                            </div>
                            <!--widgetsource-->
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle">Basic Pills <a href="widgetsource" class="showhide">View Source</a></h4>
                        <div class="widgetcontent">
                        	<ul class="nav nav-pills">
                              <li class="active"><a href="#">Home</a></li>
                              <li><a href="#">Profile</a></li>
                              <li><a href="#">Messages</a></li>
                            </ul>
                          <div class="widgetsource">
                            	<div class="divider15"></div>
                                <pre class="prettyprint linenums">&lt;ul class=&quot;nav nav-pills&quot;&gt;
   ...
&lt;/ul&gt;</pre>
                            </div>
                            <!--widgetsource-->
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle">Stacked Tabs <a href="widgetsource" class="showhide">View Source</a></h4>
                        <div class="widgetcontent navsample">
                        	<ul class="nav nav-tabs nav-stacked">
                              <li class="active"><a href="#">Home</a></li>
                              <li><a href="#">Profile</a></li>
                              <li><a href="#">Messages</a></li>
                            </ul>
                          <div class="widgetsource">
                            	<div class="divider15"></div>
                                <pre class="prettyprint linenums">&lt;ul class=&quot;nav nav-tabs nav-stacked&quot;&gt;
   ...
&lt;/ul&gt;</pre>
                          </div>
                            <!--widgetsource-->
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle">Stacked Pills <a href="widgetsource" class="showhide">View Source</a></h4>
                        <div class="widgetcontent navsample">
                        	<ul class="nav nav-pills nav-stacked">
                              <li class="active"><a href="#">Home</a></li>
                              <li><a href="#">Profile</a></li>
                              <li><a href="#">Messages</a></li>
                            </ul>
                          <div class="widgetsource">
                            	<div class="divider15"></div>
                                <pre class="prettyprint linenums">&lt;ul class=&quot;nav nav-pills nav-stacked&quot;&gt;
   ...
&lt;/ul&gt;</pre>
                          </div>
                            <!--widgetsource-->
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle">Tabbable In Any Direction <a href="widgetsource" class="showhide">View Source</a></h4>
                        <div class="widgetcontent">
                       		<div class="tabbable tabs-below">
                          		<div class="tab-content">
                            		<div id="A" class="tab-pane">
                              			<p>I'm in Section A.</p>
                            		</div>
                            		<div id="B" class="tab-pane">
                              			<p>Howdy, I'm in Section B.</p>
                            		</div>
                            		<div id="C" class="tab-pane active">
                              			<p>What up girl, this is Section C.</p>
                            		</div>
                          		</div>
                          		<ul class="nav nav-tabs">
                            		<li class=""><a data-toggle="tab" href="#A">Section 1</a></li>
                            		<li class=""><a data-toggle="tab" href="#B">Section 2</a></li>
                            		<li class="active"><a data-toggle="tab" href="#C">Section 3</a></li>
                          		</ul>
                        	</div><!--tabbable-->
                            
                            <div class="divider15"></div>
                            
                            <div class="tabbable tabs-right">
                            	<ul class="nav nav-tabs">
                                	<li class="active"><a data-toggle="tab" href="#rA">Section 1</a></li>
                                	<li><a data-toggle="tab" href="#rB">Section 2</a></li>
                                	<li><a data-toggle="tab" href="#rC">Section 3</a></li>
                              	</ul>
                              	<div class="tab-content">
                                	<div id="rA" class="tab-pane active">
                                  		<p>I'm in Section A.</p>
                                	</div>
                                	<div id="rB" class="tab-pane">
                                  		<p>Howdy, I'm in Section B.</p>
                                	</div>
                                	<div id="rC" class="tab-pane">
                                  		<p>What up girl, this is Section C.</p>
                                	</div>
                              </div><!--tab-content-->
                            </div><!--tabbable tabs-right-->
                            
                            <div class="divider15"></div>
                            
                            <div class="tabbable tabs-left">
                            	<ul class="nav nav-tabs">
                                	<li class="active"><a data-toggle="tab" href="#lA">Section 1</a></li>
                                	<li><a data-toggle="tab" href="#lB">Section 2</a></li>
                                	<li><a data-toggle="tab" href="#lC">Section 3</a></li>
                              	</ul>
                              	<div class="tab-content">
                                	<div id="lA" class="tab-pane active">
                                  		<p>I'm in Section A.</p>
                                	</div>
                                	<div id="lB" class="tab-pane">
                                  		<p>Howdy, I'm in Section B.</p>
                                	</div>
                                	<div id="lC" class="tab-pane">
                                  		<p>What up girl, this is Section C.</p>
                                	</div>
                              	</div><!--tab-content-->
                            </div><!--tabbable tabs-left-->
                            
                            <div class="widgetsource">
                           	  <div class="divider15"></div>
                                <pre class="prettyprint linenums">&lt;div class=&quot;tabbable tabs-below&quot;&gt;&lt;!--remove tabs-below for top--&gt;
  &lt;div class=&quot;tab-content&quot;&gt;
    &lt;div id=&quot;A&quot; class=&quot;tab-pane&quot;&gt; ... &lt;/div&gt;
    ...<br>  &lt;/div&gt;
  &lt;ul class=&quot;nav nav-tabs&quot;&gt;
    &lt;li class=&quot;&quot;&gt;&lt;a data-toggle=&quot;tab&quot; href=&quot;#A&quot;&gt;Section 1&lt;/a&gt;&lt;/li&gt;
    ...
  &lt;/ul&gt;<br>&lt;/div&gt;</pre>
							  <div class="divider15"></div>
                                <pre class="prettyprint linenums">&lt;div class=&quot;tabbable tabs-right&quot;&gt;&lt;!-- change tabs-left for left--&gt;
  &lt;ul class=&quot;nav nav-tabs&quot;&gt;
    &lt;li class=&quot;&quot;&gt;&lt;a data-toggle=&quot;tab&quot; href=&quot;#A&quot;&gt;Section 1&lt;/a&gt;&lt;/li&gt;
    ...
  &lt;/ul&gt;
  &lt;div class=&quot;tab-content&quot;&gt;
    &lt;div id=&quot;A&quot; class=&quot;tab-pane&quot;&gt; ... &lt;/div&gt;
    ...<br>  &lt;/div&gt;<br>&lt;/div&gt;</pre>
                            </div><!--widgetsource-->
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle nomargin">Pagination <a href="widgetsource" class="showhide">View Source</a></h4>
                        <div class="widgetcontent bordered">
                        	<div class="pagination">
                              <ul>
                                <li class="disabled"><a>Previous</a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">Next</a></li>
                              </ul>
                            </div><!--pagination-->
                            
                            <div class="pagination pagination-large">
                              <ul>
                                <li class="disabled"><a>&laquo;</a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">&raquo;</a></li>
                              </ul>
                            </div><!--pagination-->
                            
                            <div class="pagination pagination-mini">
                              <ul>
                                <li class="disabled"><a>Previous</a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">Next</a></li>
                              </ul>
                            </div><!--pagination-->
                            
                            <div class="pagination pagination-centered">
                              <ul>
                                <li class="disabled"><a>Previous</a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">Next</a></li>
                              </ul>
                            </div><!--pagination-->
                            
                            <div class="pagination pagination-right">
                              <ul>
                                <li class="disabled"><a>Previous</a></li>
                                <li class="active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">Next</a></li>
                              </ul>
                            </div><!--pagination-->
                            
                            <div class="widgetsource">
                            	<pre class="prettyprint linenums">&lt;div class=&quot;pagination&quot;&gt;
  &lt;ul&gt;
    &lt;li class=&quot;disabled&quot;&gt;&lt;a&gt;Previous&lt;/a&gt;&lt;/li&gt;<br>    &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;2&lt;/a&gt;&lt;/li&gt;
    ...
  &lt;/ul&gt;
&lt;/div&gt;</pre>
							<div class="divider15"></div>
                            <pre class="prettyprint linenums">&lt;div class=&quot;pagination pagination-large&quot;&gt;
  &lt;ul&gt; ... &lt;/ul&gt;
&lt;/div&gt;</pre>
							<div class="divider15"></div>
                            <pre class="prettyprint linenums">&lt;div class=&quot;pagination pagination-mini&quot;&gt;
  &lt;ul&gt; ... &lt;/ul&gt;
&lt;/div&gt;</pre>
							<div class="divider15"></div>
                            <pre class="prettyprint linenums">&lt;div class=&quot;pagination pagination-centered&quot;&gt;
  &lt;ul&gt; ... &lt;/ul&gt;
&lt;/div&gt;</pre>
							<div class="divider15"></div>
                            <pre class="prettyprint linenums">&lt;div class=&quot;pagination pagination-right&quot;&gt;
  &lt;ul&gt; ... &lt;/ul&gt;
&lt;/div&gt;</pre>
                            </div><!--widgetsource-->
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle nomargin shadowed">Pager <a href="widgetsource" class="showhide">View Source</a></h4>
                        <div class="widgetcontent bordered shadowed">
                        	<ul class="pager">
                              <li><a href="#">Previous</a></li>
                              <li><a href="#">Next</a></li>
                            </ul>
                            
                            <ul class="pager">
                              <li class="previous"><a href="#"><span>&larr;</span> Older</a></li>
                              <li class="next"><a href="#">Newer <span>&rarr;</span></a></li>
                            </ul>
                            
                            <ul class="pager">
                              <li class="previous disabled"><a href="#"><span>&larr;</span> Older</a></li>
                              <li class="next"><a href="#">Newer <span>&rarr;</span></a></li>
                            </ul>
                            <div class="widgetsource">
                            	<pre class="prettyprint linenums">&lt;ul class=&quot;pager&quot;&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Previous&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Next&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
							<div class="divider15"></div>
							<pre class="prettyprint linenums">&lt;ul class=&quot;pager&quot;&gt;
  &lt;li class=&quot;previous&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;&amp;larr;&lt;/span&gt; Older&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;next&quot;&gt;&lt;a href=&quot;#&quot;&gt;Newer &lt;span&gt;&amp;rarr;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
							<div class="divider15"></div>
							<pre class="prettyprint linenums">&lt;ul class=&quot;pager&quot;&gt;
  &lt;li class=&quot;previous disabled&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;span&gt;&amp;larr;&lt;/span&gt; Older&lt;/a&gt;&lt;/li&gt;
  &lt;li class=&quot;next&quot;&gt;&lt;a href=&quot;#&quot;&gt;Newer &lt;span&gt;&amp;rarr;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>
                            </div><!--widgetsource-->
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle nomargin">Progress Bars <a href="widgetsource" class="showhide">View Source</a></h4>
                        <div class="widgetcontent bordered">
                        	
                            <div class="progress">
                              <div style="width: 60%;" class="bar"></div>
                            </div><!--progress-->
                            
                            <div class="progress progress-striped">
                              <div style="width: 20%;" class="bar"></div>
                            </div><!--progress-->
                            
                            <div class="progress progress-striped active">
                              <div style="width: 45%" class="bar"></div>
                            </div><!--progress-->
                            
                            <div class="progress progress-info">
                              <div style="width: 20%" class="bar"></div>
                            </div><!--progress-->
                            
                            <div class="progress progress-success">
                              <div style="width: 40%" class="bar"></div>
                            </div><!--progress-->
                            
                            <div class="progress progress-warning progress-striped">
                              <div style="width: 60%" class="bar"></div>
                            </div><!--progress-->
                            
                            <div class="progress progress-danger progress-striped active">
                              <div style="width: 80%" class="bar"></div>
                            </div><!--progress-->
                            
                            <div class="widgetsource">
                            	<pre class="prettyprint linenums">&lt;div class=&quot;progress&quot;&gt;
  &lt;div style=&quot;width: 60%;&quot; class=&quot;bar&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</pre>
								<div class="divider15"></div>
                                <pre class="prettyprint linenums">&lt;div class=&quot;progress progress-striped&quot;&gt;</pre>
                                
                                <div class="divider15"></div>
                                <pre class="prettyprint linenums">&lt;div class=&quot;progress progress-striped active&quot;&gt;</pre>
                                
                                <div class="divider15"></div>
                                <pre class="prettyprint linenums">&lt;div class=&quot;progress progress-info&quot;&gt;</pre>
                                
                                <div class="divider15"></div>
                                <pre class="prettyprint linenums">&lt;div class=&quot;progress progress-success&quot;&gt;</pre>
                                
                                <div class="divider15"></div>
                                <pre class="prettyprint linenums">&lt;div class=&quot;progress progress-warning progress-striped&quot;&gt;</pre>
                                
                                <div class="divider15"></div>
                                <pre class="prettyprint linenums">&lt;div class=&quot;progress progress-danger progress-striped active&quot;&gt;</pre>
                                
                            </div><!--widgetsource-->
                        </div><!--widgetcontent-->
                            
                    </div><!--span6-->
                    
                    <div class="span6">
                        
                        <h4 class="widgettitle">Button Dropdowns</h4>
                        <div class="widgetcontent">
                        	<table class="table table-bordered table-buttonlist">
                            	<tbody>
                                	<tr>
                                        <td>
                                            <div class="btn-group">
                                            <button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
                                            <ul class="dropdown-menu">
                                              <li><a href="#">Action</a></li>
                                              <li><a href="#">Another action</a></li>
                                              <li><a href="#">Something else here</a></li>
                                              <li class="divider"></li>
                                              <li><a href="#">Separated link</a></li>
                                            </ul>
                                          </div>
                                        </td>
                                        <td><pre class="prettyprint">class="btn"</pre></td>
                                    </tr>
                                	<tr>
                                        <td>
                                            <div class="btn-group">
                                            <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Action <span class="caret"></span></button>
                                            <ul class="dropdown-menu">
                                              <li><a href="#">Action</a></li>
                                              <li><a href="#">Another action</a></li>
                                              <li><a href="#">Something else here</a></li>
                                              <li class="divider"></li>
                                              <li><a href="#">Separated link</a></li>
                                            </ul>
                                          </div>
                                        </td>
                                        <td><pre class="prettyprint">class="btn btn-primary"</pre></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="btn-group">
                                            <button data-toggle="dropdown" class="btn btn-danger dropdown-toggle">Action <span class="caret"></span></button>
                                            <ul class="dropdown-menu">
                                              <li><a href="#">Action</a></li>
                                              <li><a href="#">Another action</a></li>
                                              <li><a href="#">Something else here</a></li>
                                              <li class="divider"></li>
                                              <li><a href="#">Separated link</a></li>
                                            </ul>
                                          </div>
                                        </td>
                                        <td><pre class="prettyprint">class="btn btn-danger"</pre></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="btn-group">
                                            <button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Action <span class="caret"></span></button>
                                            <ul class="dropdown-menu">
                                              <li><a href="#">Action</a></li>
                                              <li><a href="#">Another action</a></li>
                                              <li><a href="#">Something else here</a></li>
                                              <li class="divider"></li>
                                              <li><a href="#">Separated link</a></li>
                                            </ul>
                                          </div>
                                        </td>
                                        <td><pre class="prettyprint">class="btn btn-warning"</pre></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="btn-group">
                                            <button data-toggle="dropdown" class="btn btn-success dropdown-toggle">Action <span class="caret"></span></button>
                                            <ul class="dropdown-menu">
                                              <li><a href="#">Action</a></li>
                                              <li><a href="#">Another action</a></li>
                                              <li><a href="#">Something else here</a></li>
                                              <li class="divider"></li>
                                              <li><a href="#">Separated link</a></li>
                                            </ul>
                                          </div>
                                        </td>
                                        <td><pre class="prettyprint">class="btn btn-success"</pre></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="btn-group">
                                            <button data-toggle="dropdown" class="btn btn-info dropdown-toggle">Action <span class="caret"></span></button>
                                            <ul class="dropdown-menu">
                                              <li><a href="#">Action</a></li>
                                              <li><a href="#">Another action</a></li>
                                              <li><a href="#">Something else here</a></li>
                                              <li class="divider"></li>
                                              <li><a href="#">Separated link</a></li>
                                            </ul>
                                          </div>
                                        </td>
                                        <td><pre class="prettyprint">class="btn btn-info"</pre></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="btn-group">
                                            <button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">Action <span class="caret"></span></button>
                                            <ul class="dropdown-menu">
                                              <li><a href="#">Action</a></li>
                                              <li><a href="#">Another action</a></li>
                                              <li><a href="#">Something else here</a></li>
                                              <li class="divider"></li>
                                              <li><a href="#">Separated link</a></li>
                                            </ul>
                                          </div>
                                        </td>
                                        <td><pre class="prettyprint">class="btn btn-inverse"</pre></td>
                                    </tr>
                                    <tr>
                                        <td>
                                           <div class="btn-group">
                                            <button class="btn">Action</button>
                                            <button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
                                            <ul class="dropdown-menu">
                                              <li><a href="#">Action</a></li>
                                              <li><a href="#">Another action</a></li>
                                              <li><a href="#">Something else here</a></li>
                                              <li class="divider"></li>
                                              <li><a href="#">Separated link</a></li>
                                            </ul>
                                          </div>
                                        </td>
                                        <td><pre class="prettyprint">class="btn"</pre></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle">Nav List <a href="widgetsource" class="showhide">View Source</a></h4>
                        <div class="widgetcontent">
                        	<ul class="nav nav-list">
                                <li class="nav-header">List header</li>
                                <li class="active"><a href="#">Home</a></li>
                                <li><a href="#">Library</a></li>
                                <li><a href="#">Applications</a></li>
                                <li class="nav-header">Another list header</li>
                                <li><a href="#">Profile</a></li>
                                <li><a href="#">Settings</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Help</a></li>
                            </ul>
                            <div class="widgetsource">
                                    <div class="divider15"></div>
                                    <pre class="prettyprint linenums">&lt;ul class=&quot;nav nav-list&quot;&gt;
   &lt;li class=&quot;nav-header&quot;&gt;List Header&lt;/li&gt;
   &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
   ...
&lt;/ul&gt;</pre>
                            </div>
                            <!--widgetsource-->
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle">Basic Navbar <a href="widgetsource" class="showhide">View Source</a></h4>
                        <div class="widgetcontent">
                        	<div class="navbar">
                              <div class="navbar-inner">
                                <a href="#" class="brand">Title</a>
                                <ul class="nav">
                                  <li class="active"><a href="#">Home</a></li>
                                  <li><a href="#">Link</a></li>
                                  <li class="dropdown">
                                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                      <li><a href="#">Action</a></li>
                                      <li><a href="#">Another action</a></li>
                                      <li><a href="#">Something else here</a></li>
                                      <li class="divider"></li>
                                      <li class="nav-header">Nav header</li>
                                      <li><a href="#">Separated link</a></li>
                                      <li><a href="#">One more separated link</a></li>
                                    </ul>
                                  </li>
                                </ul>
                              </div><!--navbar-inner-->
                            </div><!--navbar-->
                                                        
                            <div class="navbar">
                          		<div class="navbar-inner">
                            		<form class="navbar-search pull-left">
                                    	<input type="text" class="search-query" placeholder="Search">
                                    </form>
                          		</div><!--navbar-inner-->
                        	</div><!--navbar-->
                            
                            <div class="navbar">
                          		<div class="navbar-inner">
                            		<form class="navbar-form pull-right">
                              			<input type="text" class="span2">
                              			<button class="btn" type="submit">Submit</button>
                            		</form>
                          		</div><!--navbar-inner-->
                        	</div><!--navbar-->
                            
                            <div class="widgetsource">
                            	<pre class="prettyprint linenums">&lt;div class=&quot;navbar&quot;&gt;
  &lt;div class=&quot;navbar-inner&quot;&gt;
    &lt;a href=&quot;#&quot; class=&quot;brand&quot;&gt;Title&lt;/a&gt;
    &lt;ul class=&quot;nav&quot;&gt;
      &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;&lt;/li&gt;
      &lt;li class=&quot;dropdown&quot;&gt; ... &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
							<div class="divider15"></div>
                            <pre class="prettyprint linenums">&lt;div class=&quot;navbar&quot;&gt;
  &lt;div class=&quot;navbar-inner&quot;&gt;
    &lt;form class=&quot;navbar-search pull-left&quot;&gt;
      &lt;input type=&quot;text&quot; class=&quot;search-query&quot;&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/div&gt;</pre>
							<div class="divider15"></div>
                            <pre class="prettyprint linenums">&lt;form class=&quot;navbar-form pull-right&quot;&gt;
  &lt;input type=&quot;text&quot; class=&quot;span2&quot;&gt;
  &lt;button class=&quot;btn&quot; type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
&lt;/form&gt;</pre>
                            
                            </div><!--widgetsource-->
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle">Inversed Navbar <a href="widgetsource" class="showhide">View Source</a></h4>
                        <div class="widgetcontent">
                        	<div class="navbar navbar-inverse">
                              <div class="navbar-inner">
                                <a href="#" class="brand">Title</a>
                                <ul class="nav">
                                  <li class="active"><a href="#">Home</a></li>
                                  <li><a href="#">Link</a></li>
                                  <li class="dropdown">
                                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                      <li><a href="#">Action</a></li>
                                      <li><a href="#">Another action</a></li>
                                      <li><a href="#">Something else here</a></li>
                                      <li class="divider"></li>
                                      <li class="nav-header">Nav header</li>
                                      <li><a href="#">Separated link</a></li>
                                      <li><a href="#">One more separated link</a></li>
                                    </ul>
                                  </li>
                                </ul>
                              </div><!--navbar-inner-->
                            </div><!--navbar-->
                            <div class="widgetsource">
                            	<pre class="prettyprint linenums">&lt;div class="navbar navbar-inverse"&gt;
  ...
&lt;/div&gt;</pre>
                            </div><!--widgetsource-->
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle">Breadcrumbs <a href="widgetsource" class="showhide">View Source</a></h4>
                        <div class="widgetcontent">
                         	<ul class="breadcrumb">
                              <li class="active">Home</li>
                            </ul>
                            <ul class="breadcrumb">
                              <li><a href="#">Home</a> <span class="divider">/</span></li>
                              <li class="active">Library</li>
                            </ul>
                            <ul class="breadcrumb">
                              <li><a href="#">Home</a> <span class="divider">/</span></li>
                              <li><a href="#">Library</a> <span class="divider">/</span></li>
                              <li class="active">Data</li>
                            </ul>
                            <div class="widgetsource">
                            	<pre class="prettyprint linenums">&lt;ul class=&quot;breadcrumb&quot;&gt;
  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt; &lt;span class=&quot;divider&quot;&gt;/&lt;/span&gt;&lt;/li&gt;
  &lt;li class=&quot;active&quot;&gt;Library&lt;/li&gt;
&lt;/ul&gt;</pre>
                            </div><!--widgetsource-->
                        </div><!--widgetcontent-->
                
                		<h4 class="widgettitle">Labels</h4>
                        <div class="widgetcontent">
                        	<table class="table table-bordered">
                                <thead>
                                  <tr>
                                    <th>Labels</th>
                                    <th>Markup</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <td>
                                      <span class="label">Default</span>
                                    </td>
                                    <td>
                                      <code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td>
                                      <span class="label label-success">Success</span>
                                    </td>
                                    <td>
                                      <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td>
                                      <span class="label label-warning">Warning</span>
                                    </td>
                                    <td>
                                      <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td>
                                      <span class="label label-important">Important</span>
                                    </td>
                                    <td>
                                      <code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td>
                                      <span class="label label-info">Info</span>
                                    </td>
                                    <td>
                                      <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td>
                                      <span class="label label-inverse">Inverse</span>
                                    </td>
                                    <td>
                                      <code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle">Badges</h4>
                        <div class="widgetcontent">
                        	<table class="table table-bordered table-striped">
                                <thead>
                                  <tr>
                                    <th>Name</th>
                                    <th>Example</th>
                                    <th>Markup</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  <tr>
                                    <td>
                                      Default
                                    </td>
                                    <td>
                                      <span class="badge">1</span>
                                    </td>
                                    <td>
                                      <code>&lt;span class="badge"&gt;1&lt;/span&gt;</code>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td>
                                      Success
                                    </td>
                                    <td>
                                      <span class="badge badge-success">2</span>
                                    </td>
                                    <td>
                                      <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td>
                                      Warning
                                    </td>
                                    <td>
                                      <span class="badge badge-warning">4</span>
                                    </td>
                                    <td>
                                      <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td>
                                      Important
                                    </td>
                                    <td>
                                      <span class="badge badge-important">6</span>
                                    </td>
                                    <td>
                                      <code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td>
                                      Info
                                    </td>
                                    <td>
                                      <span class="badge badge-info">8</span>
                                    </td>
                                    <td>
                                      <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>
                                    </td>
                                  </tr>
                                  <tr>
                                    <td>
                                      Inverse
                                    </td>
                                    <td>
                                      <span class="badge badge-inverse">10</span>
                                    </td>
                                    <td>
                                      <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</code>
                                    </td>
                                  </tr>
                                </tbody>
                              </table>
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle">Modal Window <a href="widgetsource" class="showhide">View Source</a></h4>
                        <div class="widgetcontent">
                        	<a class="btn btn-primary" href="#myModal" data-toggle="modal">Launch demo modal</a>
                            <div class="widgetsource">
                            	<div class="divider15"></div>
                            	<pre class="prettyprint linenums">&lt;a href=&quot;#myModal&quot; data-toggle=&quot;modal&quot;&gt;Launch demo modal&lt;/a&gt;</pre>
                              <div class="divider15"></div>
                              <div role="presentation"></div>
                                <pre class="prettyprint linenums">&lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
   &lt;div class=&quot;modal-header&quot;&gt;
      &lt;button aria-hidden=&quot;true&quot; data-dismiss=&quot;modal&quot; class=&quot;close&quot;&gt;×&lt;/button&gt;
      &lt;h3&gt;Modal header&lt;/h3&gt;
   &lt;/div&gt;
   &lt;div class=&quot;modal-body&quot;&gt;
      ...
   &lt;/div&gt;
   &lt;div class=&quot;modal-footer&quot;&gt;
      &lt;a class=&quot;btn&quot; href=&quot;#&quot;&gt;Close&lt;/a&gt;
      &lt;a class=&quot;btn btn-primary&quot; href=&quot;#&quot;&gt;Save changes&lt;/a&gt;
   &lt;/div&gt;
&lt;/div&gt;</pre>
                            </div><!--widgetsource-->
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle">Tooltip</h4>
                        <div class="widgetcontent">
                        	<ul class="tooltipsample">
                              <li><a data-placement="top" data-rel="tooltip" href="" data-original-title="Tooltip on top" class="btn">Top</a></li>
                              <li><a data-placement="right" data-rel="tooltip" href="" data-original-title="Tooltip on right" class="btn">Right</a></li>
                              <li><a data-placement="bottom" data-rel="tooltip" href="" data-original-title="Tooltip on bottom" class="btn">Bottom</a></li>
                              <li><a data-placement="left" data-rel="tooltip" href="" data-original-title="Tooltip on left" class="btn">Left</a></li>
                            </ul>
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle">Popover</h4>
                        <div class="widgetcontent">
							<ul class="popoversample">
                                <li><a data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="top" data-rel="popover" class="btn" href="#" data-original-title="Popover on top">Top</a></li>
                                <li><a data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="right" data-rel="popover" class="btn" href="#" data-original-title="Popover on right">Right</a></li>
                                <li><a data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="bottom" data-rel="popover" class="btn" href="#" data-original-title="Popover on bottom">Bottom</a></li>
                                <li><a data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="left" data-rel="popover" class="btn" href="#" data-original-title="Popover on left">Left</a></li>
                            </ul>
                        </div><!--widgetcontent-->

                                
                    </div><!--span6-->
                </div><!--row-fluid-->
                
            </div><!--contentinner-->
        </div><!--maincontent-->
        
    </div><!--mainright-->
    <!-- END OF RIGHT PANEL -->
    
    <div class="clearfix"></div>
    
    <div class="footer">
    	<div class="footerleft">Katniss Premium Admin Template v1.0</div>
    	<div class="footerright">&copy; ThemePixels - <a href="http://twitter.com/themepixels">Follow me on Twitter</a> - <a href="http://dribbble.com/themepixels">Follow me on Dribbble</a></div>
    </div><!--footer-->

    
</div><!--mainwrapper-->
<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal hide fade in" id="myModal">
            <div class="modal-header">
              <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
              <h3 id="myModalLabel">Modal Heading</h3>
            </div>
            <div class="modal-body">
              <h4>Text in a modal</h4>
              <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>
              <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
            </div>
            <div class="modal-footer">
              <button data-dismiss="modal" class="btn">Close</button>
              <button class="btn btn-primary">Save changes</button>
            </div>
    </div><!--#myModal-->
	<script type="text/javascript">
    jQuery(document).ready(function(){
                                    
        //Replaces data-rel attribute to rel.
        //We use data-rel because of w3c validation issue
        jQuery('a[data-rel]').each(function() {
            jQuery(this).attr('rel', jQuery(this).data('rel'));
        });
    });
    </script>          
   
	</body>
</html>
